import React, { useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import AntTabs, { HocVerticalLeftStyleTab } from '~/public/cpas-ui/components-ui/ant-components/AntTab';
// import { Radio, Space, Tabs } from 'antd';
import { getSubjectList, getSubjectSDB, getSubjectType } from '../../service';
import { useModel } from 'umi';
import "../../index.less";

const AccountTabs: React.FC<any> = React.forwardRef((props: any, ref: any) => {
    const { AccountDataID, changeDataFun } = props;
    const [tabsData, setTabsData] = useState<any>([])
    const [TbsStates, setTbsStates] = useState<any>('0')

    const { initialState } = useModel('@@initialState');
    const { zcbfid, dbname } = initialState?.curPart as API.CurPart;

    // 获取切换数据
    const getSubjectTypeData = async () => {
        const res = await getSubjectType({
            dbname,
            Data_ID: AccountDataID,
        });
        if (res.success) {
            res.data.unshift({ code: "0", type: "全部" })
            setTabsData(res.data);
        }
    };

    useEffect(() => {
        if (AccountDataID) {
            getSubjectTypeData();
        }
    }, [AccountDataID]);

    const AccountTabsClick = (r: any) => {
        setTbsStates(r);
        const resF = tabsData.filter((item: any) => r === item.code);
        changeDataFun(resF[0]?.type ?? '全部');
    };

    useImperativeHandle(ref, () => ({
        refresh: () => {
            setTbsStates('0');
        },
        show: (tab: string) => {
            setTbsStates(tab);
        },
    }));

    const AccountTabs = (data: any) => {
        return <HocVerticalLeftStyleTab
            activeKey={TbsStates}
            className='AccountSubjectsTabs'
            tabPosition='left'
            tabBarStyle={{ background: '#FFF' }}
            onChange={AccountTabsClick}
        >
            {Array.isArray(data) ?
                data.map((item: any) => {
                    return <AntTabs.Panel
                        tab={item.type}
                        key={item.code}
                        style={{ marginTop: "5px" }}
                    />
                })
                : ''
            }
        </HocVerticalLeftStyleTab >
    }
    return (
        <>
            {
                useMemo(() => {
                    return AccountTabs(tabsData)
                }, [tabsData, TbsStates])
            }

        </>
    )
})
export default AccountTabs;